<template>
  <div>
    <van-nav-bar
      title="登录注册"
      left-text="取消"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-button round type="info" size="small">注册</van-button>
      </template>
    </van-nav-bar>
    <!-- logo -->
    <div class="img_box">
      <van-image
        :src="require('../assets/logo.png')"
        width="100"
        height="100"
        radius="50"
        style="text-align: center"
      />
    </div>
    <!-- 用户名密码表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        maxlength="20"
        left-icon="user-o"
        clearable="true"
        placeholder="请输入用户名"
        :rules="[{ required: false, message: '请输入账号名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        left-icon="lock"
        placeholder="请输入密码"
        clearable="true"
        :rules="[{ required: false, message: '请输入密码' }]"
      >
        <template #button>
          <span @click="isShow">
            <van-icon name="closed-eye" v-if="show" />
            <van-icon name="eye-o" v-else />
          </span>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";

export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      show: true,
      showornot: "password",
      act: "",
    };
  },
  // username:values.username,
  //         password:values.password
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    onClickRight() {
      this.$router.push("/register");
    },
    onSubmit(values) {
      console.log("submit", values);
      console.log(this.URL+'/login')
      axios.post(this.URL+'/login', {
        username:values.username,
        password:values.password
      }).then(function(res){
          console.log(res)
      }).catch(function(err){
          Toast("登录失败")
      })
    },
    isShow() {
      this.show = !this.show;
      if (this.show === true) {
        this.showornot = "password";
      } else {
        this.showornot = "text";
      }
    },
  },
};
</script>

<style scoped>
.img_box {
  width: 100%;
  text-align: center;
  margin: 0.2rem auto;
}
</style>